<template>
  <a-layout theme="light" style="min-height: 100vh;height: 100%">
    <a-layout-sider style="border-inline-end: 1px solid rgba(5, 5, 5, 0.06);" width="300" theme="light"
                    v-model:collapsed="collapsed" collapsible>
      <div
          style="height: 80px;display: flex;flex-direction: column;box-sizing: border-box;padding: 8px 16px;justify-content: space-around;">
        <div :style="{justifyContent:collapsed?'center':'start'}" style="display: flex;align-items: center;">
          <div
              style="background: #36f;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;border-radius: 4px;font-weight: bold;font-size: 24px;color: white">
            云
          </div>
          <div v-if="!collapsed" style="margin-left: 8px;font-weight: bold;font-size: 22px;">基本功大赛</div>
        </div>
        <div v-if="!collapsed" style="font-size: 12px;color: #8b8b8b;text-align: start">云南省基本功大赛竞赛管理系统
        </div>
      </div>
      <!--      <a-menu style="padding: 16px;box-sizing: border-box" v-model:selectedKeys="selectedKeys" theme="light" mode="inline">-->

      <!--      </a-menu>-->
      <a-menu
          style="padding: 8px 16px;"
          :selectedKeys="state.selectedKeys"
          :inline-collapsed="state.collapsed"
          :open-keys="state.openKeys"
          @openChange="onOpenChange"
          mode="inline"
          :items="items"
          @click="click"
      ></a-menu>
    </a-layout-sider>

    <a-layout style="display: flex;flex-direction: column;height: 100%">
      <a-layout-header
          style="background: #fff; padding: 0;border-bottom: 1px solid rgba(5, 5, 5, 0.06);">
        <div style="display: flex;align-items: center;flex-direction: row;width: 100%;padding: 0px 32px;height: 100%;box-shadow: 0 1px 4px rgba(0,21,41,.08);">

          <ExpandOutlined v-if="!isFullFlag" @click="fullScreen" style="font-size: 18px"/>

          <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>

          <div style="flex: 1">

          </div>

          <a-badge style="margin-right: 16px" count="0">
            <BellOutlined style="font-size: 24px"/>
          </a-badge>

          <a-popover style="cursor: pointer;color: #1a1a1a">
            <template #content>
              <a-button type="primary" @click="loginout">退出登录</a-button>
            </template>

            <div style="display: flex;flex-direction: row;align-items: center;cursor: pointer">
              <a-avatar>
                <template #icon>
                  <UserOutlined/>
                </template>
              </a-avatar>
              <div
                  style="margin: 0px 8px;color: #1a1a1a;font-size: 16px;min-width: 120px;display: flex;flex-direction: column">
                <span style="margin: 0px;padding: 0px;line-height: normal;text-align: start;font-weight: bolder">{{
                    getUsername()
                  }}</span>
                <div style="line-height: normal;text-align: start;color: #8b8b8b;font-size: 14px">{{
                    getUsername()
                  }}
                </div>
              </div>
              <CaretDownOutlined/>
            </div>
          </a-popover>

        </div>
      </a-layout-header>
      <!--      <a-layout-content >-->

      <!--      </a-layout-content>-->

      <div style="background: white;padding-top: 8px">
        <a-tabs @change="tabChange" :tabBarGutter="8" :hideAdd="true"
                v-model:activeKey="activeKey" type="editable-card">
          <a-tab-pane :closable="pane.closable" v-for="pane in selectMenu" :key="pane.key">
            <template #tab>
              {{ pane.label }}

            </template>
          </a-tab-pane>
          <template #rightExtra>
            <a-button style="margin-right: 8px">
              <ReloadOutlined/>
            </a-button>

          </template>
        </a-tabs>
      </div>


      <div font="{color:#ffffff}" style="overflow-y: scroll;flex:1;">

        <router-view style="min-height: calc(100% - 40px)" v-slot="{ Component }">
          <keep-alive>
            <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive"/>
        </router-view>
        <CompanyText style="border-inline-start: 1px solid rgba(5, 5, 5, 0.06);"/>

      </div>
    </a-layout>
  </a-layout>
</template>
<script>
import {h, reactive, ref} from 'vue';
import {
  ApartmentOutlined,
  DashboardOutlined,
  SettingOutlined,
  BarChartOutlined,
  BankOutlined,
  TeamOutlined
} from '@ant-design/icons-vue';

export default {
  name: "IndexPage2",
  components: {},

  data() {
    const basePath = '/index';
    const collapsed = ref(false);
    const selectedKeys = ref(['1']);
    const str = ref("sds")
    const items = ref([
      {label: '工作台', key: 1, icon: h(DashboardOutlined), path: '/index/home'},
      {
        label: '学校管理', key: 2, icon: h(BankOutlined), path: '/index/schoolManage'
      },
      {
        label: '学生管理', key: 3, icon: h(TeamOutlined), path: '/index/studentManage'
      },
      {
        label: '设备管理', key: 4, icon: h(ApartmentOutlined), path: '/index/myDevice'
      },
      {
        label: '系统管理', key: 5, icon: h(SettingOutlined), children: [
          {label: '用户管理', key: 41, path: '/index/userManage'},
          {label: '采样点管理', key: 42, path: '/index/positionManage'},
          {label: '采样元素管理', key: 43, path: '/index/elementManage'},
        ],
      },

    ]);
    const state = reactive({
      rootSubmenuKeys: [1, 2, 3, 4, 5, 6, 7],
      openKeys: [],
      selectedKeys: [],
      collapsed: false,
      basePath,
    });
    const selectMenu = [];
    return {
      collapsed,
      selectedKeys,
      str,
      items,
      state,
      selectMenu,
      isFullFlag: false,
      activeKey: null,
    }
  },
  watch: {
    '$route': 'switchRoute'
  },
  mounted() {
    this.resetSelectMenu(this.$route.path);
  },
  methods: {
    getChildMenu() {
      let menuList = [];
      for (let i = 0; i < this.items.length; i++) {
        console.log(i);
        let menu = this.items[i];
        if (menu.children == null) {
          menuList.push(menu);
        } else {
          for (let j = 0; j < menu.children.length; j++) {
            let childMenu = menu.children[j];
            menuList.push(childMenu);
          }
        }
      }
      return menuList;
    },
    getChildMenuByKey(key) {
      for (let i = 0; i < this.items.length; i++) {
        console.log(i);
        let menu = this.items[i];
        if (menu.children == null) {
          if (menu.key === key) {
            return menu;
          }
        } else {
          for (let j = 0; j < menu.children.length; j++) {
            if (menu.children[j] === key) {
              return menu.children[j];
            }
          }
        }
      }
    },
    onOpenChange(openKeys) {
      console.log(openKeys);
      const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
      if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.state.openKeys = openKeys;
      } else {
        this.state.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
      console.log(openKeys);
    },
    click(e) {
      this.$router.push({path: e.item.path})
      this.resetSelectMenu(e.item.path);
    },
    fullScreen() {
      var element = document.documentElement;
      if (!this.isFullFlag) {
        element.requestFullscreen();
      } else {
        element.exitFullscreen();
      }
      this.isFullFlag = !this.isFullFlag
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
      this.isFullFlag = !this.isFullFlag
    },
    switchRoute() {
      console.log("switchRoute")
      console.log(this.$route.path)
      this.resetSelectMenu(this.$route.path);
      // let index = this.dynamicTags.find((item) => item.name === this.$route.name);
      // console.info("index",index);
      // if (index == null)
      //   this.addTags();
      // console.log(this.$route.path);
    },
    resetSelectMenu(path) {
      for (let i = 0; i < this.items.length; i++) {
        let children = this.items[i].children;
        if (children == undefined) {
          if (this.items[i].path == path) {
            console.log(this.items[i].key);
            this.state.selectedKeys[0] = this.items[i].key;
            let flag = false;
            for (let j = 0; j < this.selectMenu.length; j++) {
              if (this.selectMenu[j].key === this.items[i].key) {
                flag = true;
              }
            }
            if (!flag) {
              this.selectMenu.push(this.getChildMenuByKey(this.items[i].key));
            }
            this.activeKey = this.items[i].key;
          }
        } else {
          console.log(children)
          for (let j = 0; j < children.length; j++) {
            let item = children[j];
            if (item.path === path) {
              console.log(item.key)
              this.state.openKeys[0] = this.items[i].key;
              this.state.selectedKeys[0] = item.key;

              let flag = false;
              for (let i = 0; i < this.selectMenu.length; i++) {
                if (this.selectMenu[i].key === item.key) {
                  flag = true;
                }
              }
              if (!flag) {
                this.selectMenu.push(this.getChildMenuByKey(item.key));
              }
              this.activeKey = item.key;
            }
          }
        }
      }
    },
    toggleCollapsed() {
      this.state.collapsed = !this.state.collapsed;
    },
    getUsername() {
      var jsonObj = JSON.parse(window.localStorage.getItem('user'));
      if (jsonObj == null) return "未登录";
      return jsonObj.nickname;
    },
    loginout() {
      window.sessionStorage.removeItem('token');
      this.$router.push({path: '/login'})
    },
    tabChange(e) {
      console.log(e);
      let menu = this.getChildMenuByKey(e);
      this.$router.push({path: menu.path})
      // this.resetSelectMenu(menu.path)
    }
  }
}

</script>
<style scoped>

#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: rgba(255, 255, 255, .3);
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, .3);
  margin: 16px;
}

</style>
